<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
            height: 30px;
            line-height: 30px;

            line-height: 21px;
        }
    </style>

</head>
<body>
    <!--
            行高代表了一行文字在容器中所占的高度
            line-height        行高
                   16xp        数值加单位

            如果line-heigth == height    那么文字就会垂直居中


            测量多行文字行高的方法：
                            1、首要要知道文字的大小； 12px
                            2、测量两行文字之间的距离；13px
                            3、用两行文字之间的距离除以2   13/2=7.5   上边6px，下边7px；

            如果行高为奇数，文字的上边距会少1px，下边距会多1px；
    -->
    <div>欢迎</div>
</body>
</html>